Skip to content

[Translation] Handling Events#27

Closed
niyabits wants to merge 25 commits into
reactjs:mainfrom
niyabits:patch-2
Closed

[Translation] Handling Events#27
niyabits wants to merge 25 commits into
reactjs:mainfrom
niyabits:patch-2

Conversation

@niyabits

@niyabits niyabits commented Mar 24, 2019

Copy link
Copy Markdown
Contributor
  • 1. First Section
  • 2. Try it on CodePen
  • 3. Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}

@netlify

netlify Bot commented Mar 24, 2019

Copy link
Copy Markdown

Deploy preview for hi-reactjs ready!

Built with commit 398b05e

https://deploy-preview-27--hi-reactjs.netlify.com

@niyabits niyabits changed the title [Translation] Line 11 - Initial Commit [Translation] Handling Events Mar 26, 2019
@arshadkazmi42

Copy link
Copy Markdown
Member

@yashguptaz Just want to check in, if you are waiting for review for this. I would suggest have at least 1 section translated for review.

@niyabits

Copy link
Copy Markdown
Contributor Author

I will proceed with this tomorrow, I'm busy with some client work right now.

@arshadkazmi42

Copy link
Copy Markdown
Member

@yashguptaz Just ping me whenever you want me to start the review

@niyabits

Copy link
Copy Markdown
Contributor Author

@arshadkazmi42 Can you review now as I have completed one section?

@arshadkazmi42 arshadkazmi42 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good start.
I have added a couple of comments.
We can close on the review of this section, then you can proceed with further translations

Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
@arshadkazmi42

Copy link
Copy Markdown
Member

@yashguptaz There's a couple of things missed, once you are done with those, you can continue working on rest of the page translation

@arshadkazmi42

Copy link
Copy Markdown
Member

@yashguptaz Any updates on this?

@niyabits

Copy link
Copy Markdown
Contributor Author

No, I'm busy these days that's why I am not able to do any further translations.

@niyabits

Copy link
Copy Markdown
Contributor Author

@arshadkazmi42 Can you review please?
I am free now for a few days, let's get this done.
Sorry for inactivity.

@arshadkazmi42

Copy link
Copy Markdown
Member

@saranshkataria

Copy link
Copy Markdown
Contributor

@yashguptaz any updates on this?

@niyabits

Copy link
Copy Markdown
Contributor Author

@saranshkataria No, I am not finding out much time to work on it :/

@saranshkataria

Copy link
Copy Markdown
Contributor

@yashguptaz let us know if you will be able to spare time to complete this, else we will be closing this PR out

@niyabits

niyabits commented Oct 7, 2019

Copy link
Copy Markdown
Contributor Author

@arshadkazmi42
I have fixed and marked 👍 to every issue.
@saranshkataria
You can start with the 2nd phase of review after the above issues are marked as resolved by @arshadkazmi42

@saranshkataria

Copy link
Copy Markdown
Contributor

@arshadkazmi42 let me know if you are done :)

@arshadkazmi42 arshadkazmi42 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work. Thank you for working on all those feedbacks 👍
@saranshkataria you can start with the 2nd phase of the review.

@niyabits

niyabits commented Oct 8, 2019

Copy link
Copy Markdown
Contributor Author

@saranshkataria Mention me once you're done with the phase 2 review.

@niyabits

Copy link
Copy Markdown
Contributor Author

@saranshkataria are you done with reviewing? Please do it fast, I have to manage it all with my school and coaching.

Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
* React events are named using camelCase, rather than lowercase.
* With JSX you pass a function as the event handler, rather than a string.
* React के इवेंट्स का नाम lowercase कि जगह camelCase में रक्खा जाता है ।
* JSX का उपयोग करते समय, आप एक function को string की जगह इवेंट हैंडलर में पास करते हैं ।

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changes the context of the sentence, rewrite it in a better way perhaps?

Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
Comment thread content/docs/handling-events.md Outdated
@saranshkataria

Copy link
Copy Markdown
Contributor

added comments till line 94

@niyabits

Copy link
Copy Markdown
Contributor Author

@saranshkataria Can you proceed with the review process?

```

Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, ताकी आपको cross-browser compatibility कि चिंता नही करनी पड़े । और सीखने के लिए [`SyntheticEvent`](/docs/events.html) की रिफरेन्स गाइड को देखें ।

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

नही करनी पड़े -> na karni

जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक कौम्पोनॅन्ट डिफाइन करते हैं, तो इसके लिए इवेंट हैंडलर को उस क्लास का मेथड होना एक आम पैटर्न है । उद्धरण के तौर पर `Toggle` कॉम्पोनेन्ट एक बटन को रेंडर करता है, ये बटन यूज़र को "ON" और "OFF" states को बदलने देता है:

```js{6,7,10-14,18}
class Toggle extends React.Component {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

translate comments as well?

[**इससे CodePen पर इस्तेमाल करें**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)

You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
JSX callbacks आपको `this` के मतलब के साथ ध्यानपूर्वक रहना चाहिए । जावास्क्रिप्ट में class मेथड्स पहले से [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) नहीं होते । अगर आप `this.handleClick` को bind करना भूल जाते हैं और उसे `onClick` पर पास कर देते हैं तो, `this` function के बुलाने पर `undefined` हो जाता है ।

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSX callbacks आपको this के मतलब के साथ ध्यानपूर्वक रहना चाहिए । -> incorrect sentence structure

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

बुलाने पर undefined हो जाता है । -> could be worded better?

JSX callbacks आपको `this` के मतलब के साथ ध्यानपूर्वक रहना चाहिए । जावास्क्रिप्ट में class मेथड्स पहले से [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) नहीं होते । अगर आप `this.handleClick` को bind करना भूल जाते हैं और उसे `onClick` पर पास कर देते हैं तो, `this` function के बुलाने पर `undefined` हो जाता है ।

This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
यह बर्ताव React कि वजेह से नहीं होता बल्कि यह [जावास्क्रिप्ट के functions के काम करने के तरीके का एक भाग है ](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). आम तौर पर अगर आप किसी मेथड को बिना `()` को उसके बाद में लगाये refer करते है, जैसे, `onClick={this.handleClick}` तो आपको वो मेथड bind करना चाहिए ।

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

कि वजेह -> spelling of both words is incorrect

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

आम तौर पर अगर आप किसी मेथड को बिना () को उसके बाद में लगाये refer करते है, जैसे, onClick={this.handleClick} तो आपको वो मेथड bind करना चाहिए । revisit sentence structure

अगर `bind` का बार बार कॉल करना आपको परेशान करता है, तो इससे बचने के आपके पास दो तरीके हैं । अगर आप experimental [public class फ़ील्ड्स सिंटेक्स](https://babeljs.io/docs/plugins/transform-class-properties/) इस्तेमाल कर रहे हैं, तो आप class फ़ील्ड्स का इस्तेमाल करके callbacks को सही से bind कर सकते हैं:

```js{2-6}
class LoggingButton extends React.Component {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

translate comments?

```

This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
यह सिंटैक्स [Create React App](https://github.com/facebookincubator/create-react-app) में डिफ़ॉल्ट रूप में पाया जाता है।

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

में डिफ़ॉल्ट रूप में पाया जाता है। -> better wording?

अगर आप class फील्ड सिंटैक्स नहीं इस्तेमाल कर रहें हैं तो आप callback में [एरो फंक्शन](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) का इस्तेमाल कर सकते हैं।

```js{7-9}
class LoggingButton extends React.Component {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comments again

@saranshkataria

Copy link
Copy Markdown
Contributor

added comments till {#passing-arguments-to-event-handlers}

@arshadkazmi42

Copy link
Copy Markdown
Member

Closing due to inactivity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants